<template>
    <div class="goodsreg-root">
        <div class="reg-top">
            <div class="img-box"><img :src="'/imgs/goods/'+skindItem.pics[0]"></div>
            <p><span class="fa fa-rmb"></span><span>{{skindItem.price}}</span></p>
            <p>库存{{skindItem.stock}}件</p>
            <p v-show="!showallreg">
                      请选择 <span v-for="r in reg">
                        <span>{{r}} </span>
                      </span>
            </p>
            <p v-show="showallreg">
                已选 <span v-for="regitem in regArry">"{{regitem}} "</span>
            </p>
            <div class="close-reg" @click="closeReg"><span class="fa fa-times"></span></div>
        </div>
        <div class="reg-contain">
            <div v-for=" (r,i) in skindItem.reg" class="gualar-ctrl">
                <div v-for="(v,k) in r">
                    <p>{{k}}</p>
                    <div>
                        <span class="reg-item" :class="[{ activereg: g==regArry[i] }, k]" v-for="g in v" @click="addReg($event,i,k)">{{g}}</span>
                    </div>
                </div>
            </div>
        </div>
        <div class="confirm" @click="chartClick">确定</div>
    </div>
</template>

<script>
    import {mapState} from 'vuex';
    export default {
        data: function() {
            return {
                gnum: 1,
                reg: [],
                allchecked: false,
                regArry: [],
            }
        },
        computed: {
            showallreg: function() {
                var regnum = 0;
                for (var i = 0; i < this.reg.length; i++) {
                    if (this.reg[i] == '') {
                        regnum++;
                    }
                }

                return regnum == this.reg.length;
            },
            ...mapState([
                "skindItem",
                "userinfo",
                "cartItemReg"
            ])
        },
        methods: {
            closeReg: function() {
                this.$store.commit("setShowCar", false);
            },
            addReg: function(e, i, k) {

                // this.regArry = [];
                if (this.reg[i] == "") {
                    if (e.target.classList.length == 3) {
                        e.target.classList.remove("activereg");
                        this.reg.splice(i, 1, k);
                    } else {
                        document.getElementsByClassName(k + ' activereg')[0].classList.remove("activereg");
                        e.target.classList.add("activereg");
                    }

                } else {
                    e.target.classList.add("activereg");
                    this.reg.splice(i, 1, '');
                }

                if (this.showallreg) {
                    this.regArry = [];
                    var activeArry = document.getElementsByClassName("activereg");
                    for (var i = 0; i < activeArry.length; i++) {
                        this.regArry.push(activeArry[i].innerText);
                    }
                }
            },
            chartClick: function() {
                var params = {
                    _id: this.cartItemReg._id,
                    reg: this.regArry,
                }
                if (this.regArry != this.cartItemReg.reg) {
                    this.$store.dispatch("requestEditChart", params)
                    .then(res => {
                        if (!res.data.err) {
                             var params1 = {
                                _id: this.userinfo._id
                            }
                            // 某个用户的购物车商品
                            this.$store.dispatch("requestFindchart", params1)
                            .then(res1=>{
                                res1.data.data.forEach(e => {
                                    e.check = false;
                                });
                                this.$store.commit("setFindchart", res1.data.data);
                                this.$store.commit("setShowCar",false);
                            })
                            
                        }
                    });
                }

            }
        },
        mounted: function() {
            this.skindItem.reg.forEach((e) => {
                for (var k in e) {
                    this.reg.push("");
                }
            });
            this.regArry = this.cartItemReg.reg;
        }
    }
</script>

<style scoped>
    .goodsreg-root {
        position: fixed;
        left: 0;
        bottom: 0;
        width: 100vw;
        z-index: 10000;
        height: 55vh;
        /*overflow: hidden;*/
        background-color: white;
        padding: 10px;
    }
    
    .reg-contain {
        height: 240px;
        overflow-y: scroll;
        padding-bottom: 45px;
    }
    
    .reg-box {
        width: 100%;
        padding: 10px;
        border-bottom: 1px solid #ddd;
    }
    
    .img-box {
        position: absolute;
        top: -4vw;
        left: 4vw;
        width: 30vw;
        height: 30vw;
        border: 1px solid #999;
        padding: 3px;
        background-color: white;
    }
    p{
        margin:0;
    }
    .img-box img {
        width: 30vw;
        height: 30vw;
        text-align: center;
    }
    
    .reg-top {
        padding-bottom: 10px;
    }
    
    .reg-top p {
        margin-left: 38vw;
        font-size: 14px;
        line-height: 25px;
        text-align:left;
    }
    
    .reg-top p:nth-of-type(1) {
        color: #ee0000;
        font-size: 17px;
        font-family: "宋体";
    }
    
    .close-reg {
        position: absolute;
        top: 2vw;
        right: 3vw;
        color: #666;
        border: 1px solid #666;
        padding: 0 4px;
        border-radius: 50%;
    }
    
    .gualar-ctrl {
        width: 100%;
        padding: 12px 3px;
        /*margin: 5px 0;*/
        border-bottom: 1px solid #eee;
        text-align:left;
    }
    
    .gualar-ctrl p {
        margin: 5px 0;
        font-size:14px;
    }
    
    .reg-item {
        display: inline-block;
        font-size: 12px;
        padding: 5px;
        border-radius: 5px;
        background-color: #eee;
        margin-right: 10px;
        margin-top: 5px;
        margin-bottom: 5px;
        -moz-user-select: none;
    }
    
    .buy-num {
        display: flex;
        justify-content: space-between;
        border-bottom: 1px solid #eee;
        padding: 10px 0;
    }
    
    .jadd {
        margin: 0 10px;
        color: #999;
    }
    
    .confirm {
        width: 100vw;
        height: 45px;
        position: fixed;
        bottom: 0;
        left: 0;
        background-color: red;
        text-align: center;
        line-height: 45px;
        color: white;
    }
    
    .activereg {
        background-color: red;
        color: white;
    }
</style>